<template>
  <div class="maincontent csaro">
    <el-tabs v-model="mainTab">
      <el-tab-pane label="基本信息"  name="jbxx">
        <el-form class="basicInfoForm" :inline="true" label-position="left" ref="examineForm" :model="examineOpinion" :rules="examineOpinionRule" label-width="80px">
          <div class="formcontent">
            <div>
              <el-form-item label="入库通知书编号" label-width="112px">
                <el-input readonly v-model="storeNotifyNumber" style="width: 300px;"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="maintitle">项目基本情况</div>
          <div class="basicInfo">
            <div>
              <span class="tit" v-if="proBasicData.name">项目名称：</span><span v-if="proBasicData.name">{{proBasicData.name}}</span>
              <span class="tit" v-if="proBasicData.districtRegion">位置：</span><span v-if="proBasicData.districtRegion">{{proBasicData.districtRegion.name}}{{proBasicData.countrysideRegion.name}}{{proBasicData.villageRegion.name}}</span>
              <span class="tit" v-if="proBasicData.frameNumber">图幅号：</span><span v-if="proBasicData.frameNumber">{{proBasicData.frameNumber}}</span>
              <span class="tit" v-if="proBasicData.typeName">项目类型：</span><span v-if="proBasicData.typeName">{{proBasicData.typeName}}</span>
              <span class="tit" v-if="proBasicData.duration">项目工期：</span><span v-if="proBasicData.duration">{{proBasicData.duration}}年</span>
            </div>
          </div>

          <div class="maintitle">建设规模</div>
          <div class="basicInfo" v-if="planDesignResults">
            <div>
              <span class="tit">建设规模：</span><span>{{planDesignResults.constrPredictTotalArea}}公顷</span>
              <span class="tit">拟建成高标准基本农田面积：</span><span>{{planDesignResults.constrHighLevelFarmland}}公顷</span>
              <span class="tit">整理规模：</span><span>{{planDesignResults.constrPredictOrganizeArea}}公顷 </span>
              <span class="tit">开发规模：</span><span>{{planDesignResults.constrPredictDevelopArea}}公顷 </span>
            </div>
            <div><span class="tit">新增耕地：</span><span>{{planDesignResults.constrPredictNewFarmland}}公顷</span>
              <span class="tit">新增整理耕地：</span><span>{{planDesignResults.constrPredictOrganizeFarmland}}公顷</span>
              <span class="tit">新增开发耕地：</span><span>{{planDesignResults.constrPredictDevelopFarmland}}公顷 </span>
              <span class="tit">新增复垦耕地：</span><span>{{planDesignResults.constrPredictReclaimFarmland}}公顷 </span>
            </div>
          </div>

          <div class="maintitle">预算投资金额</div>
          <div class="basicInfo" v-if="planDesignResults">
            <div>
              <span class="tit">工程施工费：</span><!--span>{{planDesignResults.projectConstructionFee}}万元</span-->
              <span class="tit"></span><span>田间道路工程费：{{planDesignResults.projectRoadCost}}万元</span>
              <span class="tit"></span><span>土地平整工程费：{{planDesignResults.projectLandLevelCost}}万元</span>
              <span class="tit"></span><span>农田水利工程费：{{planDesignResults.projectWaterWorksCost}}万元</span>
              <span class="tit"></span><span>生态保护工程费：{{planDesignResults.projectEcoProtectCost}}万元</span>
            </div>
            <div>
              <span class="tit">其他施工费：</span>
              <span class="tit"></span><span>设备购置费：{{planDesignResults.projectEquipmentCost}}万元</span>
              <span class="tit"></span><span>不可预见费用：{{planDesignResults.projectUnpredictableCost}}万元</span>
              <span class="tit"></span><span>项目建设亩均投资：{{planDesignResults.projectInvestmentPerMu}}万元 </span>
              <span class="tit"></span><span>新增耕地亩均投资：{{planDesignResults.projectInvestmentFarmlandPerMu}}万元 </span>
              <span class="tit"></span><span>其他费用：{{planDesignResults.projectOtherCost}}万元</span>
            </div>
            <div>
              <span class="tit">工程总投资：</span><span>{{planDesignResults.projectTotalInvestment}}万元</span>
            </div>
          </div>



          <div class="maintitle">区县审查意见</div>
          <div class="formAllRow">
            <div>
              <el-form-item label="" label-width="150px">
                <el-input style="width:774px;" :rows="6" readonly type="textarea" :value="countryOpinion"></el-input>
              </el-form-item>
            </div>
          </div>

          <div class="maintitle">市中心审查意见</div>
          <div class="formAllRow">
            <div>
              <el-form-item label="" label-width="150px">
                <el-input style="width:774px;" :rows="6" readonly type="textarea" :value="centerOpinion"></el-input>
              </el-form-item>
            </div>
          </div>

          <div class="maintitle">市局审查意见信息</div>
          <template  v-for="item in beforeOpinions">
            <div class="formAllRow">
              <div>
                <el-form-item :label="item.institutions" label-width="150px">
                  <el-input style="width:774px;" :rows="4" readonly type="textarea" v-model="item.advice"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formcontent">
              <div>
                <el-form-item label="审查人" label-width="60px" >
                  <el-image style="width: 120px; height: 60px" :src="item.people"></el-image>
                </el-form-item>
                <el-form-item label="审查日期" label-width="110px">
                  <el-date-picker v-model="item.date" readonly type="datetime">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="审查意见" label-width="110px">
                  <el-select disabled v-model="item.status">
                    <el-option label="同意" :value="0"></el-option>
                    <el-option label="不同意" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </template>
          <div class="formcontent">
            <div>
              <el-form-item label="审查人" label-width="60px" prop="signature">
                <el-image style="width: 120px; height: 60px" :src="`${$config.baseUrlImg}${userInfo.signedPhoto}`"></el-image>
              </el-form-item>
              <el-form-item label="审查日期" label-width="110px" prop="createTime">
                <el-date-picker v-model="examineOpinion.createTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :readonly="isCurrentProcess">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="审查意见" label-width="110px" prop="status" >
                <el-select v-model="examineOpinion.status" :disabled="isCurrentProcess">
                  <el-option label="同意" :value="0"></el-option>
                  <el-option label="不同意" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>

          <div style="margin-top:60px;">
            <el-form-item>
              <el-button type="primary" v-if="!isCurrentProcess" @click="onSubmit">提交</el-button>
              <el-button @click="$router.push('/projectManagement/planningStage/dealwith')">取消</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="审查流程" name="sclc">
        <div class="processContainer">
          <process :processData="processData"></process>
        </div>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>
    import process from "../../plannDesignApplication/public/process"
    import { getDetail,
        getBasicData,
        planningBudgetBasicDetail,
        examineOpinionList,
        saveBackAdministration,
        addReviewOpinion } from '@/api/plannDesignBudget/cityStorageAdministrativeReview'
    import { mapState } from 'vuex'
    import moment from 'moment'
    export default {
        components: {
            process
        },
        data() {
            return {
                mainTab: 'jbxx',
                projectId: localStorage.getItem('projectId'),
                storeNotifyNumber: '',
                preOpinions: {},
                examineOpinion:{
                    groupId: 9,
                    type: 1,
                    opinion: '',
                    createTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
                    status: 0
                },
                beforeOpinions: [],
                proBasicData: {},
                fileList:[],
                tableData:[],
                planDesignResults: {},
                processData:[],
                examineOpinionRule: {
                    opinion: [{require: true,
                        validator: (rule, value, callback) => {
                            if(value == null || value == '') {
                                callback(new Error('请填写审查意见'))
                            }
                            callback()
                        }, trigger: 'blur'}],
                    createTime: [{require: true,
                        validator: (rule, value, callback) => {
                            if(value == null || value == '') {
                                callback(new Error('请填写审查意见'))
                            }
                            callback()
                        }, trigger: 'blur'}]
                }
            };
        },
        computed: {
            ...mapState({
                userInfo: (state) => state.user.userInfo
            }),
            countryOpinion () {
                let op = ''
                if (this.preOpinions && this.preOpinions['distAuditAdvice'] && this.preOpinions['distAuditAdvice'].length > 0) {
                    const distAuditAdvice = this.preOpinions['distAuditAdvice']
                    for (let item of distAuditAdvice) {
                        op += `${item.opinionName}：${item.content}；${item.result} \r\n`
                    }
                }
                return op
            },
            centerOpinion () {
                let op = ''
                if (this.preOpinions && this.preOpinions['municipalAuditAdvice'] && this.preOpinions['municipalAuditAdvice'].length > 0) {
                    const distAuditAdvice = this.preOpinions['municipalAuditAdvice']
                    for (let item of distAuditAdvice) {
                        op += `${item.opinionName}：${item.content}；${item.result} \r\n`
                    }
                }
                return op
            },
            isCurrentProcess:function () {
              let isTrue = localStorage.getItem('key') == 'PLANNING_DESIGN_AND_BUDGETING_CITY_BUREAU_1';
              return !isTrue
            }
        },
        created() {
            this._initData()
        },
        methods: {
            onSubmit(){
                let isTrue = false
                this.$refs['examineForm'].validate(valid => {
                    isTrue = Boolean(valid)
                })
                if(isTrue) {
                    const loading = this.$loading({
                        lock: true,
                        text: "Loading",
                        spinner: "el-icon-loading",
                        background: "rgba(0, 0, 0, 0.7)"
                    })
                    const data = Object.assign(this.examineOpinion, {projectId: this.projectId, signature: this.userInfo.signedPhoto})
                    addReviewOpinion(data).then(res => {
                        loading.close();
                        this.$message.success('操作成功');
                        this.$router.push('/projectManagement/planningStage/dealwith');                        
                    }).catch(err => {
                        loading.close()
                    })
                }
            },
            // 获取图幅号、区县审查、市中心审查
            _getStorageNotifyNumber() {
                getDetail({projectId: this.projectId}).then(res => {
                    if( res.data ) {
                        this.storeNotifyNumber = res.data.storeNotifyNumber
                        let po = {}
                        po = Object.assign({distAuditAdvice: res.data.distAuditAdvice})
                        po = Object.assign(po, {municipalAuditAdvice: res.data.municipalAuditAdvice})
                        this.preOpinions = po
                    }
                })
            },
            // 获取项目基础信息
            _getProBasicData () {
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)"
                })
                getBasicData ({projectId: this.projectId}).then(res => {
                    if(res.data) {
                        this.proBasicData = res.data
                    }
                    loading.close()
                }).catch(err => {
                    loading.close()
                })
            },
            // 获取项目规划预算编制成果基础数据
            _getPlanDesignResults() {
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)"
                })
                planningBudgetBasicDetail({projectId: this.projectId}).then(res => {
                    if(res.data) {
                        this.planDesignResults = res.data
                    }
                    loading.close()
                }).catch(err => {
                    loading.close()
                })
            },
            // 审查流程/审查意见数据获取
            _getProcessList () {
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)"
                })
                this.processData = ["经办人审核意见",];
                const opinionType = this.examineOpinion.type
                examineOpinionList({groupId: this.examineOpinion.groupId, projectId: this.projectId}).then(res => {
                    if(res.data.length > 0) { // 审核意见
                        const inx = res.data.findIndex( item => {
                            return item.type == opinionType
                        })
                        if(inx !== -1) { // 当前阶段审核意见
                            this.examineOpinion = res.data [inx]
                        }

                    }
                    // 流程数据获取
                    let processList = this.processData.slice()
                    for (let i=0; i < processList.length; i++) {
                        let temp = { // 审查流程初始化
                            isReview: false,
                            institutions: processList[i],
                            status: 0
                        }
                        if (res.data[i]) { // 判断是否存在已走流程
                            const item = res.data[i]
                            temp['isReview'] = true
                            temp['groupId'] = item.groupId
                            temp['type'] = item.type
                            temp['status'] = item.status
                            temp['people'] = `${this.$config.baseUrlImg}${item.signature}`
                            temp['date'] = item.createTime
                            temp['advice'] = item.opinion
                        }
                        processList[i] = temp
                    }
                    this.processData = processList
                    this.beforeOpinions = processList.slice(0, opinionType)
                    loading.close()
                }).catch(err => {
                    loading.close()
                })
            },
            // 获取初始数据
            _initData () {
                this._getStorageNotifyNumber()
                this._getProBasicData()
                this._getPlanDesignResults()
                this._getProcessList()
            }

        }
    };
</script>
<style lang="scss" scoped>
  .csaro {
    /deep/ .el-tabs__content{
      overflow: unset;
    }
    /deep/ .el-tabs__header {
      background: #fff;
      height: 46px;
      padding: 0 20px;
      /deep/ .el-tabs__item {
        height: 36px;
        line-height: 36px;
        margin-top: 10px;
        padding: 0 10px;
      }
      /deep/ .el-tabs__nav-wrap::after {
        width: 0;
      }
    }
    .basicInfoForm {
      /deep/ .el-form-item__content {
        padding-right: 60px;
      }
      /deep/ .el-form-item__label{
        color: #666;
        text-align: right;
      }
      .basicSituation {
        /deep/ .el-form-item__label{
          color: #666;
          text-align: left;
          padding: 0;
        }
      }
      /deep/ .el-input__suffix-inner {
        color: #8c8c8c;
        i{
          font-style: normal;
        }
      }
      .labelNormal {
        label{
          font-weight: normal;
          color: #A6A6A6;
          font-size: 13px;
        }
      }
      .equalArea {
        /deep/ .el-form-item__content {
          padding-right: 20px;
        }
      }
    }
    .formAllRow {
      /deep/ .el-form-item__content .el-textarea .el-textarea__inner{
        width: 1170px;
        max-width: calc(100vw - 320px - 60px);
      }
      /deep/ .el-form-item__label {
        display: block;
        text-align: left;
        margin-top: 15px;
      }
      /deep/ .el-form-item {
        width: 100%;
      }
    }
  }
</style>
<style lang="scss" scoped>
  .processContainer {
    background: #fff;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    height: calc(100vh - 120px);
  }
  .maincontent{
    height: calc(100vh - 114px);
    padding: 30px;
    overflow: auto;
    background: #F5F6F7;
    .basicInfoForm {
      background: #fff;
      padding: 20px;
    }
    .maintitle{
      font-size:18px;
      font-family:PingFang SC;
      font-weight:bold;
      line-height:25px;
      color: #4d4d4d;
      margin-top: 60px;
      margin-bottom: 30px;
      &:first-child {
        margin-top: 0;
      }
    }
    .basicInfoForm {
      span {
        display: inline-block;
        margin:20px 60px 0 0;
        font-size: 14px;
        color: #999999;
      }
      .tit{
        color: #666666;
        font-weight: bold;
        margin-right: 0;
        height: 40px;
        line-height: 40px;
        margin: 0;
      }
      .basicSituation {
        margin-top: 20px;
      }
    }
    .equalArea div .tit:nth-of-type(2n){
      margin-left: 40px;
    }
    .formcontent{
      margin-top: 30px;
    }
    .secondtitle{
      font-size:14px;
      font-family:PingFang SC;
      font-weight:500;
      line-height:20px;
      margin-right:20px;
      line-height:38px;
    }
  }
</style>

